<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<script src="js/requireLib/jquery-1.9.1.min.js"></script>-->
		<script src="../components/echarts-4.0.4.min.js"></script>
		<style>
			html,body{
				width: 100%;
				height: 100%;
				background:#0A0F23;
			}
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<div id="main" style="width: 100%;height: 100%;"></div>
	</body>
	<script>
		var myChart = echarts.init(document.getElementById('main'));
		var option = {
			color: ['#e8b828', '#1c95b4',"#f96873","#20fb3e","#cb07ef","#613c07"],
			backgroundColor: '#0A0F23',
		    title: {
		        text: "近五年全国技术交易方式",
		        top: "5%",
		        left: "center",
		        textStyle: {
		            color: "#FFF",
		            fontSize: 22
		        }
		    },
		    grid: {
		        left: '10%',
		        right: '10%',
		        top:"15%",
				bottom: '10%',
				height: '70%',
		        containLabel: true
		    },
		    legend: {
		        data: ['技术开发', '技术转让','技术咨询','技术服务','技术投资入股'],
		        left: 'center',
				bottom: '7%',
		        textStyle: {
					color: '#fff',
					fontSize:16
				}
		    },
		    xAxis : [
		        {
		            type : 'value',
		            scale:true,
		            splitLine: {
		                lineStyle: {
		                    type: 'dashed',
		                    color:'#0A0F23'
		                }
		            },
		            min:'2013',
		            max: '2017',
		            axisLabel: {
	                    interval: 0,
						textStyle: {
							color: '#fff',
							fontSize: 16,
						}
					},
					axisLine: {
			            lineStyle: {
			                color: '#fff'
			            }
			        }
		        }
		    ],
		    grid: {
		    	top:'20%',
		    	height:'60%',
		        containLabel: true
		    },
		    yAxis : [
		        {
		            type : 'value',
		            scale:true,
		            splitLine: {
		                lineStyle: {
		                    type: 'dashed'
		                }
		            },
		            axisLine: {
						lineStyle: {
							color: '#fff',
						}  
					},
	                axisLabel: {
	                    interval: 0,
	                    textStyle: {
	                        color: '#fff',
	                    	fontSize: 16
	                    }
	                }
		        }
		    ],
		    series : [
		        {
		            name:'技术开发',
		            type:'scatter',
		            data: [[2015.2, 51.6],[2013.2, 21.6],[2013.5, 32.6],[2013.8, 51.6], [2015.5, 59.0], [2014.5, 49.2], [2014.0, 63.0], [2014.8, 53.6],
		                [2016.0, 59.0], [159.1, 47.6], [2015.6, 69.8], [2016.2, 66.8], [2015.9, 75.2],
		                [2014.7, 55.2], [2016.9, 54.2], [2016.4, 62.5], [2014.3, 42.0], [2015.0, 50.0],
		                
		            ],
		            symbolSize:20
		        },
		        {
		            name:'技术转让',
		            type:'scatter',
		            data: [[2013.2, 12.0],[2013.4, 25.6],[2016.0, 65.6], [2016.3, 71.8], [2015.2, 80.7], [2014.9, 32.6], [2016.6, 78.8],
		                [2013.5, 74.8], [2015.3, 84.4], [2016.5, 78.4], [2015.5, 62.0], [2014.3, 81.6],
		                [2014.0, 76.6], [2016.8, 83.6], [2016.6, 70.0], [2014.8, 74.6], [2017.0, 71.0],
		                
		            ],
		            symbolSize:21
		        },
		        {
		            name:'技术咨询',
		            type:'scatter',
		            data: [[2013.0, 14.0],[2013.3, 21.2],[2016.0, 65.6], [2016.3, 71.8], [2015.5, 80.7], [2014.4, 42.6], [2015.7, 58.8],
		                [2016.5, 70.8], [2015.2, 56.4], [2015.3, 38.4], [2015.0, 62.0], [2013.7, 51.6],
		                [2014.0, 66.6], [2014.8, 23.6], [2015.6, 60.0], [2014.3, 74.6], [2017.0, 95.0],
		                
		            ],
		            symbolSize:22
		        },
		        {
		            name:'技术服务',
		            type:'scatter',
		            data: [[2013.1, 15.0],[2013.3, 28.2],[2013.5, 30.6], [2013.9, 31.8], [2014.2, 37.7], [2014.5, 41.6], [2014.7, 38.8],
		                [2015.1, 54.8], [2015.3, 56.4], [2015.5, 38.4], [2015.0, 62.0], [2013.3, 81.6],
		                [2016.0, 76.6], [2016.8, 83.6], [2015.6, 90.0], [2016.3, 74.6], [2017.0, 95.0],
		                
		            ],
		            symbolSize:21
		        },
		        {
		            name:'技术投资入股',
		            type:'scatter',
		            data: [[2013.1, 21.0],[2013.3, 22.2],[2013.5, 23.6], [2013.9, 12.8], [2014.2, 22.7], [2014.5, 33.6], [2014.7, 23.8],
		                [2015.1, 46.8], [2015.3, 46.4], [2015.5, 28.4], [2015.0, 45.0], [2013.3, 76.6],
		                [2016.0, 34.6], [2016.8, 77.6], [2015.6, 88.0], [2016.3, 60.6], [2017.0, 80.0],
		                
		            ],
		            symbolSize:21
		        }
		    ]
		};
		myChart.setOption(option);
	</script>

</html>